<template>
 <div>
   <label>请选择状态</label>
    <el-select v-model="state" placeholder="筛选" @change="queryStuChangeClass">
      <el-option value='0' label="申请中" :key='0'>
      </el-option>
      <el-option value='1' label="已过期" :key='1'>
      </el-option>
      <el-option value='2' label="已完成" :key='2'>
      </el-option>
      <el-option value='3' label="已拒绝" :key='3'>
      </el-option>
    </el-select>
    <label>请选择班级</label>
    <el-select v-model="c_id" placeholder="请选择班级" @change="queryStuChangeClass">
      <el-option
        v-for="item in classes"
        :key="item.id"
        :label="item.cname"
        :value="item.id"
      >
      </el-option>
    </el-select>
 <el-table :data="tableData" style="width: 100%">
      <el-table-column label="学生姓名" width="180" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.student.name}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="原班级" width="180" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.class1.cname}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="转去班级" width="180" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.class2.cname}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="申请教师" width="180" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.petteacher.name}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.state == 0">申请中</el-tag>
            <el-tag size="medium" v-if="scope.row.state == 1">已过期</el-tag>
             <el-tag size="medium" v-if="scope.row.state == 2">已完成</el-tag>
              <el-tag size="medium" v-if="scope.row.state == 3">已拒绝</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <el-tag size="medium" > <el-button type="primary" size="mini" @click="check(scope.row)"
            plain>详情
          </el-button></el-tag>
           <el-tag size="medium" v-if="scope.row.state == 0"> <el-button type="primary" size="mini" @click="agreeStuChangeClass(scope.row)"
            plain>同意
          </el-button></el-tag>
           <el-tag size="medium" v-if="scope.row.state == 0"> <el-button type="primary" size="mini" @click="refuseStuChangeClass(scope.row)"
            plain>拒绝
          </el-button></el-tag>
            <el-tag size="medium" v-if="scope.row.state == 0"> <el-button type="primary" size="mini" @click="retractStuChangeClass(scope.row)"
            plain>撤回
          </el-button></el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="详细信息" :visible.sync="dialogVisible" width="70%">
      <label>学生姓名:</label>
      <el-tag size="medium">{{name}}</el-tag>
      <label>学号</label>
     <el-tag size="medium">{{number}}</el-tag>
      <label>原班级</label>
      <el-tag size="medium">{{class1}}</el-tag>
       <label>转去班级</label>
     <el-tag size="medium">{{class2}}</el-tag>
       <label>申请人</label>
     <el-tag size="medium">{{petteacher}}</el-tag>
       <label>申请时间</label>
     <el-tag size="medium">{{application_date}}</el-tag>
       <label>处理时间</label>
     <el-tag size="medium" v-if="end_date == null">尚未处理</el-tag>
      <el-tag size="medium" v-if="end_date != null">{{end_date}}</el-tag>
       <label>状态</label>
      <el-tag size="medium" v-if="state1 == 0">申请中</el-tag>
            <el-tag size="medium" v-if="state1 == 1">已过期</el-tag>
             <el-tag size="medium" v-if="state1 == 2">已完成</el-tag>
              <el-tag size="medium" v-if="state1 == 3">已拒绝</el-tag>
       <label>转班理由</label>
      <el-tag size="medium">{{reason}}</el-tag>
       <label>确认人</label>
    <el-tag size="medium">{{confteacher}}</el-tag>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
 </div>
</template>
<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
  data(){
    return{
      c_id:1,
      tableData:[],
      state:'0',
      classes:[],
      dialogVisible: false,
      name:'',
      number:0,
      class1:'',
      class2:'',
      application_date:'',
      end_date:'',
      petteacher:'',
      confteacher:'',
      state1:'',
      reason:''
    }
  },
  methods:{
     queryStuChangeClass(){
        axios.get(commons.baseUrl +
        "student_account_management/queryStuChangeClassByC_id?"+
        "c_id=" + this.c_id +
        "&state=" + this.state)
        .then(res => {
          if(res.data.code == 200){
            this.tableData = res.data.rights;
          }
        });
       
    },
    check(row){
      this.dialogVisible=true;
      this.name=row.student.name;
      this.number=row.student.number;
      this.class1=row.class1.cname;
      this.class2=row.class2.cname;
      this.application_date=row.application_date;
      this.end_date=row.end_date;
      this.petteacher=row.petteacher.name;
      this.confteacher=row.confteacher.name;
      this.state1=row.state;
    },
    retractStuChangeClass(row){
      this.$confirm('确定撤回消息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
      axios.get(commons.baseUrl +
        "student_account_management/retractStuChangeClass?"+
        "id=" + row.id)
        .then(res => {
          if(res.data.code == 200){
             this.$message({
              type: "success",
              message:res.data.message
              });
          }
          if(res.data.code == 201){
            this.$message({
            type: "error",
            message:res.data.message
            });
          }
      });
       }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });          
        });
    },
    refuseStuChangeClass(row){
      axios.get(commons.baseUrl +
        "student_account_management/refuseStuChangeClass?"+
        "id=" + row.id)
        .then(res => {
          if(res.data.code == 200){
            this.$message({
              type: "success",
              message:res.data.message
              });
          }
           if(res.data.code == 201){
            this.$message({
            type: "error",
            message:res.data.message
            });
          }
        });
    },
    agreeStuChangeClass(row){
      axios.get(commons.baseUrl +
        "student_account_management/aggreeStuChangeClass?"+
        "id=" + row.id)
        .then(res => {
          if(res.data.code == 200){
            this.$message({
              type: "success",
              message:res.data.message
              });
          }
           if(res.data.code == 201){
            this.$message({
            type: "error",
            message:res.data.message
            });
          }
        });
    },
      getClassByG_id(){
       axios.get(
          commons.baseUrl +
            "student_account_management/getClassByG_id?g_id=" +1 
        ).
       then(res => {
          if(res.data.code == 200){
            this.classes=res.data.data;
          }
       });
    }
  },
   mounted() {
     this.getClassByG_id();
    this.queryStuChangeClass();
  },
};
</script>
<style scoped></style>
